<template>
    <div class="products-into-title">
        <h1 class="product-fullname" v-text="items.product_name"></h1>
        <p>
            <strong>SKU:</strong>{{items.product_sku}}
        </p>
        <div class="price-box">
            <span class="special-price">{{items.specialPrice | Currency}}</span>
            <span class="old-price">{{items.oldPrice | Currency}}</span>
        </div>
        <p class="stock text-uppercase">
            STATUS:
            <span class="instock" v-text="items.product_status"></span>
        </p>
    </div>
</template>
<script>
import mixin from '../../mixin'
export default {
    mixins: [mixin],
    props: ['items']
}
</script>
<style scoped>
.products-into-title .product-fullname {
    margin-top: 0;
    font-size: 24px;
}

.products-into-title .price-box {
    margin-bottom: 10px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    color: #222;
}

.products-into-title .price-box .old-price {
    font-size: 14px;
    color: #aaa;
    text-decoration: line-through;
    padding-left: 3px;
}

@media (max-width: 991px) {
    .products-into-title {
        margin-top: 20px;
        -webkit-box-ordinal-group: 1;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
    }
}
</style>
